<template>
  <div class="page">
    <c-title :hide="false" text="理疗项目"></c-title>

    <div class="top">
      <div class="shuju">
        <h3>技师团队</h3>

        <div v-for="(item, index) in jList" :key="index">
          <div class="imgclass">
            <img :src="item.thumb" />
          </div>
          <div class="sjtop">
            <div class="nameclass">
              <div class="name">{{ item.name }}</div>
            </div>
            <div class="kmclass">{{ item.department_name }}</div>
            <div type="buttom" class="btn" block @click="datashow(item.id, 1)">预约</div>
          </div>
          <div class="sjbottom">
            <div class="professionclass">{{ item.remark }}：</div>
            <div class="addressclass">{{ item.address }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <van-row>
        <h3>{{ Porjects.cate_name }}</h3>
        <div v-for="(item, index) in Porject" :key="index" class="img">
          <van-col span="8" @click="datashow(item.id, 2)"><img :src="item.thumb" /><br />{{ item.name }}</van-col>
        </div>
      </van-row>

      <van-dialog v-model="show" confirm-button-text="确认" cancel-button-text="取消" show-cancel-button title="预约信息" :before-close="onclose">
        <van-form>
          <van-cell-group inset>
            <van-field v-model="form.date" is-link readonly label="预约时间" placeholder="请输入开始时间" @click="dateshow = true" />
            <van-field readonly="" is-link @click="acshow = true" v-model="select" placeholder="请选择项目" name="理疗项目" label="理疗项目" v-if="num == 1" />
            <van-field readonly="" is-link @click="jsshow = true" v-model="select" placeholder="请选择技师" name="技师" label="技师" v-if="num == 2" />
          </van-cell-group>
        </van-form>
      </van-dialog>
    </div>
    <van-popup v-model="acshow" position="bottom" v-if="num == 1">
      <van-picker v-model="selectshow" :columns="actions" @select="onSelect" value-key="name" show-toolbar @confirm="onConfirmSele" @cancel="selectshow = false" />
    </van-popup>
    <van-popup v-model="jsshow" position="bottom" v-if="num == 2">
      <van-picker v-model="selectshow" :columns="jListactions" @select="onSelect" value-key="name" show-toolbar @confirm="onConfirmSele" @cancel="selectshow = false" />
    </van-popup>
    <van-popup v-model="dateshow" position="bottom">
      <van-datetime-picker v-model="currentDate" type="date" :min-date="minDate" :max-date="maxDate" @confirm="onConfirm" @cancel="dateshow = false" />
    </van-popup>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      show: false,
      jList: [],
      jListactions: [{}],
      id: 0,
      dateshow: false,
      currentDate: new Date(),
      minDate: new Date(),
      form: {
        technician_id: null, //技师id
        member_id: null, //会员id
        store_id: null, //门店id
        yuyue_time: null //时间
      },
      id: 0,
      Proid: 0,
      rouid: 0,
      select: null,
      selectshow: false,
      acshow: false,
      jsshow: false,
      Porject: [],
      actions: [{}],
      Porjects: [],
      num: 0
    };
  },
  activated() {
    this.getList();
    this.getuser();
    this.Proid = this.$route.query.id;
    this.getPro();
  },
  methods: {
    getuser() {
      $http.post("member.member.member-data").then(response => {
        this.id = response.data.member.uid;
      });
    },
    onConfirmSele(value) {
      this.rouid = value.id;
      this.acshow = false;
      this.jsshow = false;
      this.select = value.name;
    },
    getList() {
      $http
        .post("plugin.store-cashier.frontend.store.store-technician.index", {
          store_id: 28
        })
        .then(response => {
          this.jList = response.data.data;
          this.jListactions = response.data.data;
        });
    },
    getPro() {
      $http
        .post("plugin.store-cashier.frontend.store.store-technician.get_project", {
          store_id: 28,
          category_id: this.Proid
        })
        .then(response => {
          this.Porjects = response.data;
          this.Porject = response.data.list.data;
          this.actions = this.Porject;
        });
    },
    datashow(id, num) {
      this.num = num;
      if (this.num == 1) {
        this.show = true;
        this.form.technician_id = id;
      } else {
        this.show = true;
        this.form.project_id = id;
      }
    },
    onclose(action, done) {
      // 获取会员id
      if (action == "confirm") {
        if (this.form.date != null && this.rouid != 0) {
          // 预约信息填充并发送请求
          if (this.num == 1) {
            $http
              .post("plugin.store-cashier.frontend.store.store-technician.add_yuyue", {
                technician_id: this.form.technician_id,
                member_id: this.id,
                store_id: 28,
                yuyue_time: this.form.date,
                project_id: this.rouid
              })
              .then(response => {
                console.log(response);
                if (response.result == 1) {
                  Toast(response.msg);
                }
              });
          } else {
            $http
              .post("plugin.store-cashier.frontend.store.store-technician.add_yuyue", {
                technician_id: this.rouid,
                member_id: this.id,
                store_id: 28,
                yuyue_time: this.form.date,
                project_id: this.form.project_id
              })
              .then(response => {
                console.log(response);
                if (response.result == 1) {
                  Toast(response.msg);
                }
              });
          }
            this.form = {};
        this.select=null
          return done(true);
        } else {
          Toast("请输入完整信息");
          return done(false);
        }
      } else {
        this.form = {};
        this.select=null

        return done();
      }
       
    },
    formatDate(datavalue) {
      return `${datavalue.getFullYear()}/${datavalue.getMonth() + 1}/${datavalue.getDate()}`;
    },
    onConfirm(datavalue) {
      this.dateshow = false;
      this.form.date = this.formatDate(datavalue);
      console.log(this.form.date);
    }
  }
};
</script>
<style scoped lang="scss">
.page {
  .shuju {
    margin: 1% 1%;
    border-radius: 5%;
    background-color: #fff;
    .imgclass {
      display: flex;
      img {
        width: 5rem;
        height: 5rem;
        border-radius: 3rem;
        margin-left: 1rem;
      }
    }
    .sjtop {
      display: flex;
      margin-left: 8rem;
      margin-top: -5rem;
      margin-bottom: 2.8rem;

      .nameclass {
        .name {
          display: flex;
          justify-content: center;
          width: 3rem;
          text-align: center;
          font-weight: 600;
        }
      }
      .kmclass {
        display: flex;
        justify-content: center;
        color: #1989fa;
      }
      .btn {
        width: 3rem;
        display: flex;
        justify-content: center;
        margin-left: 6.5rem;
        background: #1989fa;
        color: #fff;
      }
    }
    .sjbottom {
      display: flex;
      font-weight: bold;
      justify-content: center;
      margin-bottom: 1rem;
    }
  }
  .bottom {
    img {
      width: 90%;
      height: 100%;
      margin-top: 1rem;
    }
    .van-cell--clickable {
      cursor: pointer;
      padding: 2rem;
    }
  }
}
</style>